<template>
	<view>
		<view class="long-categories">
<!-- 左边商品类别 -->
			<view class="left">
				<scroll-view  	:scroll-with-animation="true" scroll-y  :style="'height:'+scrollViewHeight+'px'">
					<view  	class="left-item"  v-for="(item,index) in list" :key="index"
						:class="{'left-item-active': index == active }"
						@click="categoryClick(item, index)">
							 <view class="">
								 <u-image width="90rpx" height="90rpx" src="/static/images/shopcar/qingcang.png"></u-image>
							 </view>
							<view style="font-weight: bold;color: #000000;margin-top: -16rpx;"> {{ item.categoryName }} </view>
					</view>
				</scroll-view>
			</view>
<!-- 右边商品列表 -->			
			<view class="right">
				<scroll-view scroll-y @scroll="scroll"  
					:style="'height:'+scrollViewHeight+'px'"
					scroll-with-animation  :scroll-into-view="cIndex"
					@scrolltolower="scrollToBottom">
					<view class="right-container" v-for="(item,index) in list" :key="index">
						<!-- 类别名称,不能删,索引在此 -->
						<view class="category-name" :id="`cid${ item.categoryId }`">
							<view class="txt">
								<u-divider   color="#000000" border-color="#000000">{{item.categoryName}}</u-divider>
							</view>
						</view>
						<!-- 商品列表 -->
						<view  v-if="item.children.length>0">
							<view   class="good-item"  
									v-for="(child, index1) in item.children"  :key="index1" >
									<u-row>
										<u-col :span="5">
											<view @click="toDetail(item,child)"  style="height:220rpx;width:90%;margin-left: 12rpx;">
													<u-image border-radius="10"  width="100%" height="100%"  
															:fade="true" duration="500"
															:src="child.url">
														<u-loading slot="loading"></u-loading>
													</u-image>
											</view>
										</u-col>
										<u-col :span="7">
											<view   style="padding: 4rpx 0rpx; display: flex;flex-direction: column;justify-content: space-between;align-items: flex-start; height:220rpx;">
												<!-- 商品名称 -->
												<view  @click="toDetail(item,child)" style="color: #000000;font-size: 30rpx;width: 100%;" 
														class="u-line-2">{{ child['goodName'] }}</view>
											
												<view @click="toDetail(item,child)" class="u-line-2" style="font-size: 26rpx;color: #909399;">
													商品规格商品规格商品规格商品规格商品规格商品规格商品规格商品规格商品规格商品规格商品规格
												</view>
												
												<!-- 商品价格 -->
												<view style="color: #000000;font-size: 30rpx;" >
													<text  class="new-price">{{"¥"+child['price'] }}</text>
													<text v-if="child.isSale" class="old-price">{{"¥"+child['salePrice'] }}</text>
												</view>
												<!-- 订购数量 -->
												<view :class="(child.count>0)?'u-flex u-row-between u-col-center':'u-flex u-row-right u-col-center'" style="width: 100%;">
													<view v-show="child.count>0">
														<u-icon  @click="sub(item,child)" top="4" name="minus-circle-fill" color="#B5B1B2" size="32"></u-icon>
														<text style="height: 32rpx;line-height: 32rpx;margin: 0rpx 8rpx;">{{child['count']}}</text>
														<u-icon  @click="add(item,child)" top="4" name="plus-circle-fill" color="#FF4B64" size="32"></u-icon>
													</view>
													<view @click="toDetail(item,child)">
														<u-tag v-if="child.maxNum>0" text="选规格"   shape="circle" type="error" bg-color="#FF4B64" color="#ffffff" mode="dark"></u-tag>
														<u-tag v-else text="已售罄"   shape="circle" type="error" bg-color="#ffb4b9" color="#ffffff" mode="dark"></u-tag>
													</view>
												</view>
											</view>
										</u-col>
									</u-row>
							</view>
						</view>
						<view v-else class="activityEmpty">
							<view style="color:#FF4B67;">亲，今日活动还未开始</view>
							<view style="color:#FF4B67;">—— 开始时间 {{item.startActivityTime}} ——</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "category",
		data() {
			return {
				height: 0,
				active: 0,
				cIndex: '',
				topList: [],
				flag: false,
				currentSelectId:"",
				selectedGoods:[],
				goodImageSize:0,
			}
		},
		props: {
			scrollViewHeight: {
				type: [Number],
				default:uni.getSystemInfoSync().screenHeight-230
			},
			list: {
				type: Array,
				default: () => {
					return []
				}
			}
			
		},
		methods: {
			//滚动页面
			scroll(e) {
				if(this.flag){
					this.flag = false
					return
				}
				let scrollTop = e.target.scrollTop
				for(let i = 0;i < this.topList.length; i++){
					let h1 = this.topList[i]
					let h2 = this.topList[i + 1]
					if(scrollTop > h1 && scrollTop < h2) {
						this.active = i
					}
				}
			},
			//点击分类
			categoryClick(category, index) {
				this.$nextTick(() => {
					this.cIndex = `cid${ category.categoryId }`
					this.flag = true
				})
				this.cIndex = ''
				this.active = index;
			},
			//选中商品
			toDetail:function(category,item){
				/* if(item.maxNum<1){
					this.$u.toast("商品已售罄");
					return;
				} */
				if(this.currentSelectId!==item.skuId){
					this.currentSelectId=item.skuId;
				}
				this.$emit('toGoodDetail',item.skuId);
			},
			
			
			//添加商品
			add:function(category,childItem){
				if(childItem.count==childItem.maxNum){
					this.$u.toast("存货不足~");
					return;
				}
				if(childItem.count>4||this.vuex_totalCount>4){
					this.$u.toast("每笔订单限购5个商品,\r\n再来一单吧!");
					return;
				}
				childItem.count++;
				this.$emit('change', 0,JSON.parse(JSON.stringify(childItem)))
			},
			//减少商品
			sub:function(category,childItem){
				if(childItem.count==0){
					return;
				}
				childItem.count--;
				this.$emit('change',1, JSON.parse(JSON.stringify(childItem)))
			},
			//滑动到底部
			scrollToBottom () {
				setTimeout(()=>{
					this.active = this.list.length - 1
				}, 50)
			},
			
		},
	}
</script>

<style lang="less" scoped>
	.long-categories {
		display: flex;
		width: 100%;
		height: 100%;
		flex-wrap: wrap;
		border-top: 1px solid #f8f8f8;
		border-bottom: 1px solid #f8f8f8;
	}

	.left {
		width: 21%;
		border-right: 1px solid #f8f8f8;
		padding-top: 16rpx;
		padding-left: 10rpx;
	}

	.left-item {
		height: 140upx;
		width: 140upx;
		font-size: 28upx;
		color: #333333;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		border: 1px solid #eeeeee;
		margin-bottom: 20rpx;
		border-radius: 24upx;
		.num {
			width: 38upx;
			height: 38upx;
			line-height: 38upx;
			background: #F67124;
			border-radius: 50%;
			color: #FFFFFF;
			font-size: 16upx;
			font-weight: normal;
			text-align: center;
		}
	}
	
	.left-item-active {
		background: #ffffff;
		font-weight: bold;
		border-radius: 24upx;
	}
	
	.right {
		width: 79%;
		
		.new-price{
			font-weight: 600;
			color: #FF4B67;
		}
		
		.old-price{
			margin-left: 10rpx;
			text-decoration: line-through;
			color: #909399;
			font-size: 28rpx;
		}
		
		.category-name {
			padding: 20upx;
			text-align: center;
			width: 100%;
			.txt {
				width: 100%;
				padding: 0 8upx;
				display: inline-block;
				vertical-align: middle;
				font-weight: bold;
				letter-spacing: 1px;
				font-size: 30rpx;
				color:#909399 ;
			}
		}
	}
	
	.right-container {
		.category-name {
			padding: 20upx;
			text-align: center;
			.txt {
				padding: 0 8upx;
				display: inline-block;
				vertical-align: middle;
				font-weight: bold;
				letter-spacing: 1px;
				font-size: 30rpx;
				color:#909399 ;
			}
		}
		.good-item{
			height: 230rpx;
			width: 100%;
			margin-bottom: 20rpx;
		}
		
		.activityEmpty{
			margin: 0rpx 20rpx;
			padding: 20rpx 10rpx;
			background-color: #F7f7F7;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
		}
		
	}

	.right-item {
		margin-left: 12upx;
		margin-bottom: 32upx;
		//width: 31.3%;
		background: #FFFFFF;
		border: 1rpx solid #f9f9f9;
		border-radius: 16upx;
		font-size: 28upx;
		padding: 2px;
		height: 260rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: flex-start;
			.good-tag {
				//border: 1px solid black;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				.good-tag-empty{
					width: 30%;
					background-color: #c8c9cc;
					text-align: center;
					color: #ffffff;
					height: 26rpx;
					line-height: 26rpx;
					font-size: 20rpx;
					border-radius: 13rpx;
				}
				
				.good-tag-desc{
					width: 60%;
					color: #ffffff;
					background: #ff4b67;
					text-align: center;
					height: 24rpx;
					line-height: 24rpx;
					font-size: 20rpx;
					border-radius: 13rpx;
				}
			}
			
			.good-img{
				//width: 88%;
				margin: 4rpx 5%;
				//margin: 0rpx 5%;
				//height: 70%;
				//border: 1px solid black;
			}
			
			.good-name{
				//border: 1px solid black;
				width: 100%;
				font-weight: bold;
				color: #363132;
				font-size: 24rpx;
				overflow: hidden;
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}
			.good-name-disable{
				//color: #c0c4cc !important;
				opacity: 0.4;
			}
			
			.good-prop{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				font-size: 16rpx;
			
				
			}
		
	}
	.right-item-active {
		//background-color: #338B61;
		//background: #EFEFEF;
		border-color: #DCDFE6;
		//color: #FFFFFF;
	}
	
	.right-item-disable {
		border-color: #f3f4f6;
		opacity: 0.8;
	}

	.right-item image {
		//width: 50px;
		//height: 50px;
	}

	.active {
		color: #F24544;
	}

	.padding {
		height: var(--status-bar-height);
		width: 100%;
		top: 0;
		position: fixed;
		background-color: #F24544;
	}
</style>
